import React, { Component } from 'react'
import { connect } from 'react-redux'
import { bindActionCreators } from "redux"
import Top from '../../components/Top/Top'
import { actions, getCartList,getAllChecked,getSum } from '../../store/modules/index'
import "./Shop.css"
export class Cate extends Component {
    componentDidMount() {
        let { index: { reqCartlist } } = this.props
        reqCartlist()
    }
    render() {
        let title = "shop"
        let { Cartlist,allChecked ,price,index:{del,add,reqCartdel,changeAlls,changeOne,AllPrice}} = this.props
        // console.log(this.props);
        // AllPrice()
        return (
            <div>
                <Top title={title}></Top>
                {
                    Cartlist.map((item) => (
                        <div className="shop_item" key={item.id}>
                            <input className="shop_item_input" checked={item.checked} 
                            onChange={(e)=>changeOne(e.target.checked,item.id)}
                            type="checkbox" name="" id="" />
                            <div className="shop_item_img">
                                <img src={item.img} alt="" />
                            </div>
                            <div className="shop_item_right">
                                <div>{item.goodsname}</div>
                                <div>price:{item.price}</div>
                                <button onClick={()=>del(item.id,item.num)}>-</button>
                                <span >{item.num}</span>
                                <button onClick={()=>add(item.id,item.num)}>+</button>
                                <button className="shop_del" onClick={()=>reqCartdel(item.id)}>删除</button>
                            </div>
                        </div>
                    ))
                }
                <div className="shop_b_div">
                    <input type="checkbox" className="shop_checkAll" checked={allChecked} onChange={(e)=>changeAlls(e.target.checked)} /> 全选
                     合计：<span >{price}</span>
                     <button>去结算 </button>
                </div>
            </div>
        )
    }
}

const mapStateToProps = (state) => ({
    Cartlist: getCartList(state),
    allChecked: getAllChecked(state),
    price:getSum(state)
})

const mapDispatchToProps = dispatch => ({
    index: bindActionCreators(actions, dispatch)
})


export default connect(mapStateToProps, mapDispatchToProps)(Cate)
